<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/6/3
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>基于SSM实现爬虫和Sql注入的Web应用</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid text-center bg-primary text-white">
    <div class="container">
        <h1 class="display-4">基于SSM实现爬虫和SQL注入的Web应用</h1>
    </div>
</div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title text-center">登录</h3>
                    <form id="loginForm">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </form>
                    <div id="loginMessage" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="footer bg-dark text-white text-center mt-5">
    <div class="container">
        <p class="mb-0 py-3">&copy; 2024 基于SSM实现爬虫和Sql注入的Web应用. 保留所有权利.</p>
    </div>
</footer>

<script>
    $(document).ready(function(){
        $('#loginForm').on('submit', function(e){
            e.preventDefault();
            var username = $('#username').val();
            var password = $('#password').val();

            $.ajax({
                type: 'POST',
                url: '/login', // 这里填写你的后端Controller路径
                data: JSON.stringify({username: username, password: password}),
                contentType: 'application/json',
                success: function(response){
                    if(response === 'success'){
                        window.location.href = '/successful';
                        // $('#loginMessage').html('<div class="alert alert-success">登录成功</div>');
                    } else {
                        $('#loginMessage').html('<div class="alert alert-danger">用户名或密码错误</div>');
                    }
                },
                error: function(){
                    $('#loginMessage').html('<div class="alert alert-danger">请求失败，请稍后再试</div>');
                }
            });
        });
    });
</script>
</body>
</html>
